<template>
    <div class="cardModule">
        <el-card shadow="hover" v-for="(item,i) in cityCard" :key="i">
            <div class="card_name">{{item.region_name}}</div>
            <div class="row_p">
                <div class="row_p_l">
                <p>今日均价</p>
                <p>{{item.price}}元</p>
                </div>
                <div class="row_p_l">
                <p>今日涨跌</p>
                <p v-if="item.upsAndDowns == 1" style="color:#DF0000"><i class="el-icon-top"></i>{{item.upsAndDownsPrice}}</p>
                <p v-else-if="item.upsAndDowns == 0">--</p>
                <p v-else style="color:#0ab86c"><i class="el-icon-bottom"></i>{{item.upsAndDownsPrice}}</p>
                </div>
            </div>
        </el-card>
    </div>
    
</template>
<script>
export default{
    props:{
        cityCard:{
            type:Array,
            default () {
                return [];
            },
        }
    },
    data(){
        return{
        }
    }
}

</script>
<style lang="less" scoped>
    .cardModule{
      padding: 20px;
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill,179px);
      grid-gap: 10px;
      // flex-flow:row wrap;
      .el-card{
        width: 178px;
        /deep/.el-card__body{
          padding: 10px;
        }
        .card_name{
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          margin-bottom: 10px;
          color: #606266;
          font-weight: 600;
        }
        .row_p{
          padding: 10px;
          background-color: #F5F6F7;
          display: flex;
          justify-content: space-between;
          .row_p_l{
            text-align: center;
            color: #606266;
            font-weight: 600;
            font-size: 14px;
            p:first-child{
              font-size: 12px;
              color: #909399;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
</style>